<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      1. 概念
        通过 Chrome 开发者工具调试查看：闭包是一个存在嵌套内部函数 closure 对象，内部包含引用外部函数局部变量
      
      2. 产生闭包的条件
        - 函数嵌套
        - 内部函数引用外部函数局部变量
        - 调用外部函数
      
      3. 作用：
        - 延长局部变量的存活时间
        - 让函数外部操作函数内部的数据
      
      4. 生命周期：
        - 产生：当嵌套的内部函数定义执行完
        - 死亡：当嵌套的内部函数成为垃圾对象，内部函数就会被垃圾回收机制回收，内部的闭包会一起被回收掉

      5. 缺点
        - 可能导致内存泄漏
          及时释放，让内部函数成为垃圾对象

      6. 应用：
        React 高阶组件（HOC） -> React复用代码方案之一
        Vue响应式原理 dep对象以闭包的形式存在get/set方法中
    -->
    <script>
      // function fn1() {
      //   debugger;
      //   var a = 1;
      //   var fn2 = function () {
      //     console.log(a);
      //   };
      //   console.log(fn2);
      // }
      // const fn2 = fn1();

      function fn1() {
        debugger;
        var a = 1;
        function fn2() {
          a++;
          console.log(a);
          return a;
        }
        return fn2;
      }
      let fn2 = fn1();
      fn2 = null;

      // var b = 2;
      // function fn1() {
      //   debugger;
      //   var a = 1;
      //   var c = 3;
      //   function fn2() {
      //     console.log(a, b);
      //   }
      //   console.log(fn2);
      // }
      // fn1();
    </script>
  </body>
</html>
